<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" type="text/css">
<script type="text/javascript" src='../../js/echarts.min.js'></script>
<script type="text/javascript" src='../../layui/layui.js'></script>
<style>
.file {
	position: relative;
	display: inline-block;
	background: #D0EEFF;
	border: 1px solid #99D3F5;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

.file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

.file:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
}
</style>
</head>
<body>
	<div id="roller" style="overflow-y: auto; overflow-x: auto;">
		<a href="javascript:;" class="file" style="margin-left: 50px; margin-top: 30px">选择文件 <input
			type="file" id="file">
		</a>&nbsp;&nbsp;<span id="fileName"></span>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label" style="margin-left: 15px">选择变量</label>
				<div class="layui-input-block" id="dictionaryInfo"></div>
			</div>
		</form>
		<div id="chart" style="width: 1200px; height: 600px; margin-left: 50px"></div>
	</div>
</body>
<script type="text/javascript">  
    //一般直接写在一个js文件中
	layui.use(['layer', 'form','upload'], function(){
	  var layer = layui.layer;
	  var form = layui.form;
	  var upload =  layui.upload;
	  var $ = layui.$;
	//获取窗口的高度
    var h = $(window).height();
    $("#roller").css("height",h+"px");

// 初始化图表标签
	var myChart = echarts.init(document.getElementById('chart'));
	
	
	var file=document.getElementById("file"); 
	 document.getElementById("file").addEventListener("change",function () {	 	
        document.getElementById("fileName").innerHTML= file.files[0].name;
    });

	//判断浏览器是否支持FileReader接口 
	if(typeof FileReader == 'undefined'){ 
		 layer.msg("你的浏览器不支持FileReader接口,无法解析文件");
	    //使选择控件不可操作 
	    file.setAttribute("disabled","disabled"); 
	} 

	/* 异步平台Select */
	var url = "../../boxDataDictionary/selectALLOne";
	$.get(url, function(result) {
		var box = JSON.parse(result);
		var dictionaryInfo = document.getElementById("dictionaryInfo");
		var deptOption = "";
		$.each(box.data, function(index, data) {
			deptOption += "<input type='radio' name = 'variables' id = '" + data.id + "' value = '" + data.id + "' data-frame_number = '" + data.frame_number + "' data-start_byte = '" + data.start_byte + "' data-end_byte='" + data.end_byte + "' data-coefficient='" + data.coefficient + "'  title='" + data.name + "'>";			
		});
		document.getElementById("dictionaryInfo").innerHTML = deptOption;
		form.render();
	});
	
	var getVariableValue = function(frame_number ,start_byte ,end_byte ,coefficient ,data){
		var result = {};
		var temporaryTime = [];
		var xdata = [];
		var ydata = [];
		var lineStr = "";
		for(var i = 0;i < data.length; i++){
			lineStr = data[i];	
			if(lineStr.indexOf("/") != -1){
				temporaryTime.push(lineStr);
			}else{
				if(lineStr.substr(0,2) == frame_number){
					ydata.push(parseInt(lineStr.substr(start_byte,end_byte).replace(/\s+/g,""),16)/coefficient);
					xdata.push("");
				}
			}
		}
		xdata.splice(0,1,temporaryTime[0]);
		xdata.splice(xdata.length,1,temporaryTime[temporaryTime.length-1]);
		result["xdata"] = xdata;
		result["ydata"] = ydata;
		return result;
	}
	
	  var readAsText = function(frame_number ,start_byte ,end_byte ,coefficient, name){ 
	    var file = document.getElementById("file").files[0];
        if(file==null){
	        layer.msg("输入的文件为空");
	        return false;
        } 
	    var reader = new FileReader(); 
	    //将文件以文本形式读入页面 
	    reader.readAsText(file); 
	    reader.onload=function(f){ 
		        var result=document.getElementById("result"); 
                var str = [];
                str = this.result.split("\r\n");
                var resultData = getVariableValue(frame_number ,start_byte ,end_byte ,coefficient ,str);
                initMyCharts(resultData,name);
	    } 
	} 
	
	var initMyCharts = function(resultData,name){
	    var options={
	        //定义一个标题
	        title:{
	            text:name
	        },
	        legend:{
	            data:['AI']
	        },
			tooltip: {
			        trigger: 'axis',
			        position: function (pt) {
			            return [pt[0], '10%'];
		       }
			 },
		toolbox: {
	        feature: {
	            dataZoom: {
	                yAxisIndex: 'none'
	            },
	            restore: {},
	            saveAsImage: {}
	        }
	    },
	        //X轴设置
	        xAxis:{
	            data:resultData.xdata,
	            axisLabel: {
				  interval: resultData.xdata.length-2, // 自定义显示X轴坐标显示间隔
				  textStyle: {
				    color: '#626262',
				    fontSize: '10',
				  }
	           }
	        },
	        yAxis:{
		       type: 'value',
	           boundaryGap: [0, '100%'] 	
	        },
	        //name=legend.data的时候才能显示图例
	        series:[{
	            name:'数值',
	            type:'line',
	            data:resultData.ydata,
	             areaStyle: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: 'rgb(255, 158, 68)'
	                }, {
	                    offset: 1,
	                    color: 'rgb(255, 70, 131)'
	                }])
	            },
	        }]
	 
	    };
	    myChart.setOption(options);
	}
        //监听提交
	  form.on('radio', function(data){
		var getId = document.getElementById(data.value);
		var name = getId.getAttribute("title");
		var frame_number = getId.getAttribute("data-frame_number");
		var start_byte = getId.getAttribute("data-start_byte");
		var end_byte = getId.getAttribute("data-end_byte");
		var coefficient = getId.getAttribute("data-coefficient");
		readAsText(frame_number ,start_byte ,end_byte ,coefficient,name);	
	    return false;
	  });
	});
		
  
</script>
</html>